{extend name="layout" /}

{block name="style"}
<link rel="stylesheet" href="/assets/css/article.css">
{/block}

{block name="content"}
<!-- 文章头部 -->
<div class="article-header">
    <div class="container">
        <h1 data-aos="fade-up">{$article.title}</h1>
        <div class="article-meta-header" data-aos="fade-up" data-aos-delay="100">
            <span><i class="bi bi-calendar"></i> {$article.create_time|date='Y-m-d H:i'}</span>
            <span><i class="bi bi-person"></i> {$article.user.username ?: '管理员'}</span>
            <span><i class="bi bi-eye"></i> {$article.view_count ?: 0} 阅读</span>
            {if condition="$article.category"}
            <span><i class="bi bi-folder"></i> {$article.category.name}</span>
            {/if}
        </div>
    </div>
</div>

<div class="container article-container">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <!-- 文章主体 -->
            <article class="article-main" data-aos="fade-up">
                {if condition="$article.cover_image"}
                <img src="{$article.cover_image}" alt="{$article.title}" class="article-cover">
                {/if}

                {if condition="$article.tags"}
                <div class="article-tags">
                    {volist name="article.tags" id="tag"}
                    <a href="/tag-{$tag.id}.html" class="article-tag">#{$tag.name}</a>
                    {/volist}
                </div>
                {/if}

                <div class="article-body">
                    {$article.content|raw}
                </div>

                <div class="article-footer">
                    <!-- 操作按钮 -->
                    <div class="article-actions">
                        <a href="#" class="action-btn">
                            <i class="bi bi-hand-thumbs-up"></i> 点赞
                        </a>
                        <a href="#" class="action-btn">
                            <i class="bi bi-bookmark"></i> 收藏
                        </a>
                        <a href="#comments" class="action-btn">
                            <i class="bi bi-chat"></i> 评论
                        </a>
                    </div>

                    <!-- 分享按钮 -->
                    <div class="d-flex align-items-center justify-content-between">
                        <span class="text-secondary">分享到：</span>
                        <div class="share-buttons">
                            <a href="#" class="share-btn wechat" title="分享到微信">
                                <i class="bi bi-wechat"></i>
                            </a>
                            <a href="#" class="share-btn weibo" title="分享到微博">
                                <i class="bi bi-share"></i>
                            </a>
                            <a href="#" class="share-btn qq" title="分享到QQ">
                                <i class="bi bi-chat-square"></i>
                            </a>
                            <a href="#" class="share-btn link" title="复制链接">
                                <i class="bi bi-link-45deg"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 作者信息 -->
                {if condition="$article.user"}
                <div class="author-card" data-aos="fade-up">
                    <img src="{$article.user.avatar ?: '/assets/images/placeholder/avatar.svg'}" alt="{$article.user.username}" class="author-avatar">
                    <div class="author-info">
                        <h5>{$article.user.username}</h5>
                        <p>{$article.user.bio ?: '这个作者很懒，什么都没有留下...'}</p>
                    </div>
                </div>
                {/if}
            </article>

            <!-- 上下篇导航 -->
            {carefree:prevnext aid='$article.id' catid='$article.category_id' type='same'}
            <div class="article-navigation" data-aos="fade-up">
                <div class="row g-3">
                    {if condition="$prev"}
                    <div class="col-md-6">
                        <a href="/article/{$prev.id}.html" class="nav-card prev-article">
                            <span class="nav-label"><i class="bi bi-arrow-left"></i> 上一篇</span>
                            <span class="nav-title">{$prev.title}</span>
                        </a>
                    </div>
                    {else /}
                    <div class="col-md-6">
                        <div class="nav-card nav-disabled">
                            <span class="nav-label"><i class="bi bi-arrow-left"></i> 上一篇</span>
                            <span class="nav-title text-muted">没有了</span>
                        </div>
                    </div>
                    {/if}

                    {if condition="$next"}
                    <div class="col-md-6">
                        <a href="/article/{$next.id}.html" class="nav-card next-article">
                            <span class="nav-label">下一篇 <i class="bi bi-arrow-right"></i></span>
                            <span class="nav-title">{$next.title}</span>
                        </a>
                    </div>
                    {else /}
                    <div class="col-md-6">
                        <div class="nav-card nav-disabled">
                            <span class="nav-label">下一篇 <i class="bi bi-arrow-right"></i></span>
                            <span class="nav-title text-muted">没有了</span>
                        </div>
                    </div>
                    {/if}
                </div>
            </div>
            {/carefree:prevnext}

            <!-- 相关文章 -->
            {carefree:related aid='$article.id' limit='3' type='tag' id='related' empty=''}
            <div class="related-articles" data-aos="fade-up">
                <h3>相关文章</h3>
                <div class="row g-4">
                    <div class="col-md-4">
                        <div class="related-card">
                            <img src="{$related.cover_image ?: '/assets/images/placeholder/article-small.svg'}" alt="{$related.title}" class="related-image">
                            <div class="related-content">
                                <h5><a href="/article/{$related.id}.html">{$related.title}</a></h5>
                                <p class="related-meta">
                                    <i class="bi bi-calendar"></i> {$related.create_time|date='Y-m-d'}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/carefree:related}

            <!-- 评论区 -->
            <div id="comments" class="comments-section" data-aos="fade-up" data-article-id="{$article.id}">
                <h3>
                    <i class="bi bi-chat-left-text me-2"></i>
                    评论 (<span id="commentCount">0</span>)
                </h3>

                <!-- 发表评论表单 -->
                <div class="comment-form">
                    <textarea class="form-control" id="commentContent" rows="4" placeholder="写下你的评论..."></textarea>
                    <button class="btn btn-primary mt-3" id="submitCommentBtn">
                        <i class="bi bi-send me-2"></i>发表评论
                    </button>
                </div>

                <!-- 评论列表 -->
                <div id="commentsList">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="/assets/js/auth.js"></script>
<script src="/assets/js/comment.js"></script>
<script src="/assets/js/article.js"></script>
{/block}
